<template>
  <div class="bigBox">
    <!--推荐攻略头部结束  -->

    <!-- 推荐攻略列表开始 -->

    <div class="postList" v-for="post of dataList" :key="post.id">
      <div class="many" v-if="post.images.length >= 3">
        <!-- 标题 -->
        <h4 @click="getId(post.id)">{{ post.title }}</h4>
        <!-- 文章内容 -->
        <a href="#"  style="text-decoration:none">
          <span
            class="contentEllipsis"
            v-html="post.summary"
            @click="getId(post.id)"
            >{{ post.summary }}</span
          ></a
        >
        <!-- 图片列表 -->
        <div class="picRow" @click="getId(post.id)">
          <img :src="post.images[0]" alt="" />
          <img :src="post.images[1]" alt="" />
          <img :src="post.images[2]" alt="" />
        </div>

        <div class="Detail">
          <div class="postDetail">
            <span class="el-icon-location-outline"></span>
            {{ post.cityName }} by
            <div class="pic" @click="$router.push('/user/personal')">
              <img
                :src="`${$axios.defaults.baseURL}${post.account.defaultAvatar}`"
                alt=""
              />
            </div>
            <span
              @click="$router.push('/user/personal')"
              class="orange username"
              style="font-size: 12px"
              >{{ post.account.nickname }}</span
            >

            <span class="el-icon-view"></span>

            <span v-if="post.watch">{{ post.watch }}</span>

            <span style="font-size: 12px" v-else>0</span>
          </div>
          <span class="orange good">{{ post.like }} 赞</span>
        </div>
      </div>

      <div
        class="little"
        v-if="post.images.length >= 1 && post.images.length < 3"
      >
        <div class="picRow" @click="getId(post.id)">
          <img :src="post.images[0]" alt="" />
        </div>
        <div class="PostContent">
          <h4 @click="getId(post.id)">{{ post.title }}</h4>
          <!-- 文章内容 -->
          <a href="#"  style="text-decoration:none">
            <span
              class="contentEllipsis"
              v-html="post.summary"
              @click="getId(post.id)"
              >{{ post.summary }}</span
            ></a
          >
          <div class="Detail">
            <div class="postDetail">
              <span class="el-icon-location-outline"></span
              >{{ post.cityName }} by
              <div class="pic" @click="$router.push('/user/personal')">
                <img
                  :src="`${$axios.defaults.baseURL}${post.account.defaultAvatar}`"
                  alt=""
                />
              </div>
              <span
                @click="$router.push('/user/personal')"
                class="orange username"
                style="font-size: 12px"
                >{{ post.account.nickname }}</span
              >

              <span class="el-icon-view"></span>

              <span v-if="post.watch">{{ post.watch }}</span>

              <span style="font-size: 12px" v-else>0</span>
            </div>
            <span class="orange good">
              <span class="orange" v-if="post.like">{{ post.like }}</span>
              <span class="orange" v-else>0</span>
              赞</span
            >
          </div>
        </div>
      </div>

      <div class="none" v-if="post.images.length <= 0">
        <div class="picRow" @click="getId(post.id)">
          <img :src="post.images[0]" alt="" />
        </div>
        <div class="PostContent">
          <h4 @click="getId(post.id)">{{ post.title }}</h4>
          <!-- 文章内容 -->
          <a href="#">
            <span
              class="contentEllipsis"
              v-html="post.summary"
              @click="getId(post.id)"
              >{{ post.summary }}</span
            ></a
          >
          <div class="Detail">
            <div class="postDetail">
              <span class="el-icon-location-outline"></span
              >{{ post.cityName }} by
              <div class="pic" @click="$router.push('/user/personal')">
                <img
                  :src="`${$axios.defaults.baseURL}${post.account.defaultAvatar}`"
                  alt=""
                />
              </div>

              <span
                @click="$router.push('/user/personal')"
                class="orange username"
                style="font-size: 12px"
                >{{ post.account.nickname }}</span
              >
              <span class="el-icon-view"></span>

              <span v-if="post.watch">{{ post.watch }}</span>

              <span style="font-size: 12px" v-else>0</span>
            </div>
            <span class="orange good">
              <span class="orange" v-if="post.like">{{ post.like }}</span>
              <span class="orange" v-else>0</span>

              赞</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="block">
      <el-pagination
        style="width: 100%"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[3, 5, 10, 20, 50]"
        :page-size="pageSize"
        :total="total"
        :current-page="pageIndex"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: ["searchData"],
  data() {
    return {
      dataList: [],
      total: 0,
      pageSize: 3,
      pageIndex: 0,
    };
  },
  watch: {
    searchData() {
      this.dataList = this.searchData.data;
      this.total = this.searchData.total;
      console.log(this.dataList.length);
    },
  },
  created() {
    this.pageSizeChange();
  },
  methods: {
    pageSizeChange() {
      this.$axios({
        url: "/posts",
        params: {
          _start: this.pageIndex,
          _limit: this.pageSize,
        },
      }).then((res) => {
        console.log(res.data);
        this.dataList = res.data.data;
        this.total = res.data.total;
      });
    },
    sizeChange(newPageSize) {
      this.pageSize = newPageSize;
      this.pageSizeChange();
    },
    currentChange(newPageIndex) {
      this.pageIndex = newPageIndex;
      this.pageSizeChange();
    },
    getId(id) {
      console.log(id);
      this.$axios({
        url: "/posts",
        params: {
          id,
        },
      }).then((res) => {
        console.log(res.data.data[0].id);
        this.$router.push(`/post/detail?id=${res.data.data[0].id}`);
      });
    },
  },
};
</script>


<style lang="less" scoped>
.Nosearch {
  text-align: center;
  width: 200px;
  margin: 50px auto;
  font-weight: 700;
}
.block {
  display: flex;
}
.contentEllipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bigBox {
  // display: flex;
  padding-bottom: 20px;
}
// 文章列表
.postList {
  // 文章列表标题
  width: 100%;
  height: 100%;

  h4 {
    font-weight: 400;
    margin-bottom: 16px;
    cursor: pointer;
  }
  h4:hover {
    color: #ffa500;
  }
  span {
    font-size: 12px;
    color: #666;
  }

  // 文章列表用户信息
  .Detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // 用户详细信息
    .postDetail {
      font-size: 12px;
      color: #666;
      display: flex;
      align-items: center;
      margin-top: 10px;
      flex: 1;
      .username {
        cursor: pointer;
      }
      span,
      .pic {
        padding: 0 6px;
      }
      .pic {
        width: 16px;
        height: 16px;
        cursor: pointer;
        img {
          display: block;
          width: 16px;
          height: 16px;
          border-radius: 50%;
        }
      }
    }

    // 用户信息点赞数
    span {
      padding-top: 10px;
      font-size: 16px;
    }
  }
}
.many {
  padding-top: 20px;
  border-top: 1px solid #eee;

  // 图片列表
  .picRow {
    width: 100%;
    height: 150px;
    display: flex;
    margin-top: 10px;
    cursor: pointer;
    //   图片
    img {
      flex: 1;
      width: 220px;
      height: 150px;
      margin-right: 16px;
    }
  }
}
.block {
  border-top: 1px solid #eee;
  margin-top: 20px;
  padding-left: 20px;
}
.el-pagination {
  margin-top: 20px;
  padding-top: 20px;
  margin: 0 auto;
}
.none {
  border-top: 1px solid #eee;
  .contentEllipsis {
    margin-bottom: 20px;
  }
}
.little {
  display: flex;
  border-top: 1px solid #eee;
  margin-top: 20px;
  align-items: center;
  .PostContent {
    flex: 1;
  }
  .Detail {
    display: flex;
    justify-content: space-between;
    .postDetail {
      flex: 1;
    }
    .good {
      display: block;
      text-align: right;
    }
  }
  .picRow {
    // width: 100%;
    height: 150px;
    display: flex;
    margin-top: 10px;
    cursor: pointer;
    //   图片
    img {
      width: 220px;
      height: 150px;
      margin-right: 16px;
    }
  }
}
</style>